<template>
	<view>
		<cu-custom bgColor="bg-white solids-bottom" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">城市切换</block>
		</cu-custom>
		<view class="warp30"></view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action f14">
				<text class="cuIcon-location text-red2"></text> 当前定位城市 {{city}}
			</view>
		</view>
		<view class="padding-ssm text-gray">热门城市</view>
		<view class="city-list solids-bottom">
			<view class="padding-sm"><view class="city-item">北京</view></view>
			<view class="padding-sm"><view class="city-item">上海</view></view>
			<view class="padding-sm"><view class="city-item">广州</view></view>
			<view class="padding-sm"><view class="city-item">深圳</view></view>
			<view class="padding-sm"><view class="city-item">程度</view></view>
			<view class="padding-sm"><view class="city-item">杭州</view></view>
			<view class="padding-sm"><view class="city-item">南京</view></view>
			<view class="padding-sm"><view class="city-item">苏州</view></view>
			<view class="padding-sm"><view class="city-item">重庆</view></view>
			<view class="padding-sm"><view class="city-item">天津</view></view>
			<view class="padding-sm"><view class="city-item">武汉</view></view>
			<view class="padding-sm"><view class="city-item">西安</view></view>
		</view>
		<view class="warp30"></view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 248px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
					<view class="padding-ssm text-gray">{{item.name}}</view>
					<view class="cu-list menu sm-border">
						<view class="cu-item" v-for="(items) in citydata[item.name]" :key="items.Id" @tap="click1" :id="items.Name" :data-id="items.Id">
							<view class="content">
								<view class="text-black f16">{{items.Name}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">{{item.name}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:"获取中",
				amapPlugin:null,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				cityName: '',
				timer:null,
				citydata:[],
			}
		},
		onLoad(opt) {
			let list = [{}];
			let _this = this;
			uni.request({
				url: this.AjaxUrl + '/WebApi/GetCity',
				success(res) {
					let detail = JSON.parse(res.data.Extend);
					console.info(detail);
					detail = detail.sort(function(a, b){
						if(a.PinYinFirst < b.PinYinFirst) return -1;
						if(a.PinYinFirst > b.PinYinFirst) return 1;
						return 0;
					});
					_this.citydata = _this.groupBy(detail,item => item.PinYinFirst.charAt(0));
					console.info(Object.keys(_this.citydata));
					for (let i = 0; i < Object.keys(_this.citydata).length; i++) {
						list[i] = {};
						list[i].name = Object.keys(_this.citydata)[i];
					}
					_this.list = list;
					_this.listCur = list[0];
					console.info(_this.list,_this.citydata["C"]);
					_this.timer = setInterval(() => {
						uni.getStorage({
							key: 'local_city',
							success: function (res) {
								_this.city = res.data
							},
							fail:function(e){
								console.log(e);
							}
						});
						console.info(_this.city);
						if(_this.city!='获取中'){
							clearInterval(_this.timer);
							_this.timer = null;
						}
					},1000);
				},fail() {
					console.info("获取失败");
				}
			});
			console.info(opt.type);
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec();
			
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		methods: {
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			},
			click1(e) {
				//先记录值，下面this指向会不一样
				let aa = e.currentTarget.id;
				let bb = e.currentTarget.dataset.id;
				console.info(aa,bb);
				
				uni.setStorage({
					key: 'city_key',
					data: {name:aa,key:bb},
					success: function () {
						uni.navigateBack({});
					}
				});
			},
			groupBy(array, fn) {
			  let groups = {};
			  let i = 0
			  array.forEach(o => {
				o.checked = false;
				let group = fn(o);
				
				groups[group] = groups[group] || []
				groups[group].push(o)
			  })
			  return groups;
			}
		}
	}
</script>

<style lang="less">
	.padding-ssm {
		padding: 10upx 30upx;
	}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	
	.city-list {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 0 60upx 0 20upx;
	  .padding-sm{
		  width: 25%;
		  box-sizing: border-box;
		  padding: 0 10upx;
		  .city-item {
			width: 100%;
			height: 55upx;
			margin:0 0 28upx ;
			line-height: 55upx;
			text-align: center;
			border: 1px solid #dcdcdc;
			border-radius: 6upx;
			color: #999;
			font-size: 28upx;
		  }
	  }
	}
	.f16{
		font-size: 32upx;
	}
</style>
